<template>
	<div class="index bg-assist" v-loading.body="$store.state.loading">
		<search-header color="red"></search-header>
		<!-- 轮播图 -->
		<div class="bg-white text-center">
		    <el-carousel trigger="click" height="150px" arrow="never" :interval="5000">
		    	<el-carousel-item v-for="item in ads" :key="item.id">
		        	<img class="carsouel-image" :src="item.image">
		    	</el-carousel-item>
		    </el-carousel>
		</div>

		<!-- 品牌特卖 -->
		<div class="brand-sale bg-white">
			<div class="title">
				<i class="iconfont icon-shuqian"></i>
				品牌特卖
			</div>
			<ul class="brand-list">
				<li v-for="brand in brands">
					<img v-lazy="brand.image"/>
				</li>
			</ul>
		</div>

		<div class="advance">
			<img :src="ad.image">
		</div>

		<!-- 热卖推荐 -->
		<div class="hot-suggest bg-white">
			<div class="title">
				<i class="iconfont icon-huo"></i>
				热卖推荐
			</div>

			<ul class="goods-list">
				<li @click="$router.push('/goods/detail/'+product.id)" v-for="product in products">
					<img v-lazy="product.thumbnail"/>
					<p>{{product.title}}</p>
					<div class="text-left">
						<span class="price">£{{product.price}}</span>
						<i class="iconfont icon-cart add-cart"></i>
					</div>
				</li>
			</ul>
		</div>
		<div class="bottom-margin"></div>
		<app-footer></app-footer>
	</div>
</template>

<script>
import api from '~/api/api.js';
import SearchHeader from '~/components/SearchHeader.vue';
import AppFooter from '~/components/AppFooter.vue';

export default {
	components: {
		SearchHeader, AppFooter
	},
	created () {
		this.$store.commit('loading', true);
		api.get('/site/index').then(response => {
			this.$store.commit('loading', false);
			this.ads = response.data.ads;
			this.brands = response.data.brands;
			this.ad = response.data.ad;
			this.categories = response.data.categories;
			this.products = response.data.products;
		})
		.catch(error => {
			this.$store.commit('loading', false);
			this.$message.error('加载失败');
		});
	},
	mounted () {
		window.addEventListener('scroll', this.handleWindowScroll);
	},
	beforeDestroy () {
		window.removeEventListener('scroll', this.handleWindowScroll);
	},
	data () {
		return {
			prefix: '',
			ads: [],
			brands: [],
			ad: {},
			categories: [],
			products: [],
			page: 1,
			loading: false,

		}
	},
	methods: {
		handleWindowScroll (e) {
			let element = document.body;
			if (element.scrollHeight - window.scrollY === element.clientHeight && this.page != 0 && this.$store.state.loading === false) {
				this.$store.commit('loading', true);
				this.page++;
				api.get(`/site/getHots/${this.page}`)
				.then(response => {
					this.$store.commit('loading', false);
					if (response.data.length > 0) {
						this.products = this.products.concat(response.data);
					} else {
						this.page = 0;
					};
				})
			}

		}
	}
}
</script>

<style scoped>
	.index {
		margin-bottom: 60px;
	}
	.icons-place {
		text-align: center;
		margin-top: 20px;
		padding: 10px 0px;
	}

	.carsouel-image {
		height: 150px;
	}

	.categories {
		margin-top: 10px;
		overflow: hidden;
	}

	.categories .text-icon-box{
		float: left;
		width: 20%;
		text-align: center;
		padding: 10px 0px;
	}

	.categories .text-icon-box .iconfont {
		font-size: 20px;
	}

	.brand-sale, .hot-suggest {
		margin-top: 10px;
		padding: 10px 0px;
		text-align: center;
	}

	.brand-sale > .title, .hot-suggest > .title {
		padding-bottom: 10px;
		color: #ce4e4e;
	}

	.brand-sale > .title .iconfont, .hot-suggest > .title .iconfont {
	    border-radius: 50%;
		background-color: #FF5722;
		color: #fff;
	}

	.brand-list,.goods-list {
		overflow: hidden;
	}

	.brand-list li,.goods-list li {
		float: left;
		width: 49%;
		border-top: 1px solid #f7f7f7;
	}

	.goods-list li {
		padding: 10px 0px;
	}

	.brand-list li {
		height: 155px;
	}

	.brand-list li:nth-child(even), .goods-list li:nth-child(even) {
		border-left: 5px solid #f7f7f7;
	}

	.brand-list li img {
		height: 150px;
		max-width: 100%;
	}

	.goods-list li img {
		height: 150px;
		width: 150px;
	}

	.goods-list li p {
		max-height: 40px;
		overflow: hidden;
	}

	.goods-list .price {
		font-size: 18px;
		color: #b21014;
		margin-left: 10px;
	}

	.goods-list .icon-cart {
		float: right;
		margin-right: 10px;
	}

	.advance {
		margin-top: 10px;
	}

	.advance img {
		width: 100%;
		min-height: 120px;
	}
</style>
